<script setup lang="ts">
import { provide, ref } from 'vue';
import Son from './components/Son.vue';
import Sonbutton from './components/Sonbutton.vue';
import HmNavbar from './components/HmNavbar.vue';

// 父组件传递回调函数给子组件，子组件触发回调函数
const myEvent = (age: number) => {
  console.log('子组件触发回调函数', age)
}

const myName = (names: string) => {
   console.log('子组件触发回调函数', names)
}

const totalCount = ref(10)
provide('totalCount', totalCount)

provide('updateTotalCount', (num:number) => { 
  totalCount.value+=num
}) 

const appTitle = ref('应用标题')

const leftClick = (val: string) => {
  alert(val)
}
</script>

<template>
<div class="yan">
<HmNavbar v-bind:title="appTitle" @left-click-handler="leftClick">
    <button>新按钮</button>
  </HmNavbar>
   <h1>根组件 totalCount：{{ totalCount }}</h1>
  <button @click="totalCount++">修改数据+1</button>
<h1>App根组件</h1>
  <!-- 
    父传子：通过 v-bind: 和 props 传递数据
    子传父：通过 v-on: 和 emits 传递数据（传回调函数给子组件调用）
  -->
<Son :names="'张三'" :age="18" @my-emits="myEvent" @getname="myName"/>
<Sonbutton :text="'登录'" />  
<Sonbutton/>
</div>

  
</template>

<style scoped>
.yan{
  background-color: bisque;
  width: 80vw;
  height: 80vh;
  padding: 0;
  margin: 0;
}
</style>
